<template>
  <div class="content">
    <Banner :bannpic="newnavdatas[0].bannimg" />
    <div class="list">
      <div class="goods" v-for="(v, i) in newnavdatas[0].navlist" :key="i">
        <span>
          <img :src="v.img" alt="" />
          <p>{{ v.tltle }}</p>
        </span>
      </div>
    </div>
    <div class="zhong">
      <router-link to="">推荐</router-link>
      <router-link to="">销量</router-link>
      <router-link to="">价格</router-link>
    </div>
    <Like :goodsstr="newpics"> </Like>
  </div>
</template>

<script>
import Banner from "../components/Home/banner.vue";
import Like from "../components/Home/like";
export default {
  data() {
    return {
      newnavdatas: "",
    };
  },
  components: {
    Banner,
    Like,
  },
  created() {
    console.log("我是当前的id:", this.$route.query.navid);
    console.log("我是数据：", this.$store.state.homem.newnavdata);
  },
  mounted() {
    // console.log("我是初始值", this.newarr);
    this.newnavdatas = this.newnav.filter((v) => {
      if (v.id == this.$route.query.navid) {
        return v;
      }
    });
    console.log("我是筛选后得知", this.newnavdatas);
    this.$store.commit("upnavshai", this.newnavdata);
    console.log(this.newnavdatas[0]);
    // console.log("拿到的vuex里面的数据", this.$store.state.homem.newdata);
  },

  computed: {
    newnav() {
      return this.$store.state.homem.newnavdata;
    },
    newpics() {
      return this.$store.state.listm.newpic;
    },
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  min-height: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list {
  width: 95%;
  /* height: 2.6rem; */
  padding: 0.2rem 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 0.1rem;
}
.list .goods {
  width: 25%;
  height: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.2rem 0;
  /* margin: 0.07rem; */
  flex-shrink: 0;
}
.list .goods img {
  width: 0.44rem;
  height: 0.44rem;
}
.list .goods p {
  margin-top: 0.05rem;
  font-size: 0.13rem;
}
.zhong {
  width: 95%;
  background-color: #fff;
  height: 0.5rem;
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 0.1rem;
  margin-bottom: 0.1rem;
}
.zhong a {
  color: #797d82;
  font-size: 0.14rem;
}
</style>